<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

  </head>
  
  
    <style type="text/css">
     .mainDiv { 
        margin:0 auto;
	width:605px;
    }
    
    .tabsLinks{
        
	width:120px;
        text-align: center;
    }
    
    
    </style>
 
  <body>
      
      
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="http://localhost:8080/Web_UI/js/bootstrap.min.js"></script>
     <script src="http://localhost:8080/Web_UI/js/scripts.js"></script>
    
     <script> 
         isAutorized =false;
         
         $(document).ready(function() {
             $(".content").hide();
         });
         
         function  g(){
                var msg='<?xml version="1.0" encoding="UTF-8"?><S:Envelope xmlns:S="http://schemas.xmlsoap.org/soap/envelope/">'+
                '<S:Header/>'+
                '<S:Body>'+
                    '<ns2:getPic xmlns:ns2="http://WebServiceStub.com/"/>'+
                '</S:Body>'+
            '</S:Envelope>';
                $.ajax({
                url:"http://localhost:8080/WebServiceStub/WebServiceStub",
                type: "POST",
                dataType: "xml",
                data: msg,
                contentType: 'text/xml; charset="utf-8"',
                success:function(result){
                    OnSucsess(result);
                      //alert( $(result).find("return").text());
                },
                 error: function(){alert("Error: Something went wrong");}									 
                });
             
         }
         
         function OnSucsess(result){
             var res=[];
            $(result).find("return").each(function () {
                   res.push( $(this).text()) ;
            });
                 
            var canvas = document.getElementById('canvas');
                if (canvas.getContext) {
                  var ctx = canvas.getContext("2d");

                  for (i=0;i<54*56*3;i++){
                      k=i/54;
                      j=i%54;
                      color="rgb("+res[i];
                      color+=",";
                      color+=res[i+1];
                      color+=",";
                      color+=res[i+2];
                      color+=")";
                      ctx.fillStyle =color;
                      ctx.fillRect (k, j, 1, 1);
                  }
              }
         }
     </script>
    
<div class="mainDiv">
    <canvas id="canvas" width="56" height="54"></canvas>
  <button id="Button1"  onclick="g(); return false;">Greetings</button>    
    
  <div class="tabbable">
    <ul id="myTab" class="nav nav-tabs">
      <li><a href="#home" class="tabsLinks" data-toggle="tab">Authorization</a></li>
      <li><a href="#profile" class="tabsLinks" data-toggle="tab">Profile</a></li>
      <li><a href="#messages" class="tabsLinks" data-toggle="tab">Messages</a></li>
      <li><a href="#settings" class="tabsLinks" data-toggle="tab">Settings</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane fade in active well" id="home">
          <div > 
              <table style="margin:0 auto;">
                <tr>
                    <td>Login</td>
                    <td><input id="login" class="input-mini" > </td>
                </tr>
                <tr>
                    <td> Password </td>
                    <td> <input id="password" class="input-mini"> </td>
                </tr>
                 <tr>
                    <td><button class="btn btn-success" onclick="Authorization(); return false;">Login</button></td>
                    <td><button class="btn btn-danger" onclick="Authorization(); return false;">Quit</button></td>
                 </tr>
           </table> 
          </div>
          
      </div>
      <div class="tab-pane fade in well" id="profile">
            
          
           <div class="alert alert-error">
                Authorization required!
           </div>
          
          <div class="content">
              
              Some Content
          </div>
          
          
      </div>
      <div class="tab-pane fade in well" id="messages">
          <div class="alert alert-error">
                Authorization required!
           </div>
          
          <div class="content">
              
              Some Content
          </div>
      </div> 
      <div class="tab-pane fade in well" id="settings">
           <div class="alert alert-error">
                Authorization required!
           </div>
          
          <div class="content">
              
              Some Content
          </div>
      </div>
    </div>
  </div>
 </div>
  </body>
</html>